<template>
    <div>
      <el-container style="height: auto; width:auto border: 1px solid #eee">
        <el-aside width="230px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" style="width: 230px">
              <template slot="title"
                ><i class="el-icon-message"></i>森林病虫害防治系统</template
              >
  
              <el-submenu index="1-1">
                <template slot="title">资料管理</template>
                <el-menu-item index="1-1-1" @click="pest()">虫害一览</el-menu-item>
                <el-menu-item index="1-1-2" @click="dis()">病害一览</el-menu-item>
                <el-menu-item index="1-1-2" @click="mous()">鼠害一览</el-menu-item>
              </el-submenu>
  
              <el-submenu index="1-2">
                <template slot="title">灾情防治</template>
                <el-menu-item index="1-2-1" @click="reg()">区域一览</el-menu-item>
                <el-menu-item index="1-2-2" @click="cls()">小班管理</el-menu-item>
                <el-menu-item index="1-2-2" @click="eve()">事件记录</el-menu-item>
              </el-submenu>
  
              <el-submenu index="1-3">
                <template slot="title">专家会商</template>
                <el-menu-item index="1-3-1" @click="exp()">专家一览</el-menu-item>
                <el-menu-item index="1-3-2">会商灾情</el-menu-item>
              </el-submenu>
  
              <el-submenu index="1-4">
                <template slot="title">药剂器械出库信息管理</template>
                <el-menu-item index="1-4-1">药剂器械管理</el-menu-item>
                <el-menu-item index="1-4-2">出库管理</el-menu-item>
              </el-submenu>
  
              <el-submenu index="1-5">
                <template slot="title">系统信息</template>
                <el-menu-item index="1-5-1" @click="user()">用户管理</el-menu-item>
                <el-menu-item index="1-5-2" @click="rec()">日志一览</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-aside>
  
        <el-container>
          <el-main>
            <div v-if="statues" class="img">
              <div class="img01">
                <div><img src="../../img/2.jpg" alt="" /></div>
                <div><img src="../../img/3.jpg" alt="" /></div>
              </div>
              <div class="img02">
                <div>
                  <img src="../../img/4.jpg" alt="" />
                </div>
                <div>
                  <img src="../../img/5.jpg" alt="" />
                </div>
              </div>
            </div>
  
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        statues: true,
      };
    },
    methods: {
      pest() {
        this.statues = false;
        this.$router.push("/nav/pest");
      },
      dis() {
        this.statues = false;
        this.$router.push("");
      },
      mous(){
        this.statues = false;
        this.$router.push("");
      },
      user(){
        this.statues = false;
        this.$router.push("");
      },
      rec(){
        this.statues = false;
        this.$router.push("");
      },
      reg(){
  
        this.statues = false;
        this.$router.push("");
      },   
       cls(){
  
        this.statues = false;
        this.$router.push("");
      },
      eve(){
  
        this.statues = false;
        this.$router.push("");
  
      },
      exp(){
        this.statues = false;
        this.$router.push("");
  
      }
    },
  };
  </script>
  
  <style>
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  
  .img {
    margin: 10px auto;
  }
  
  .img01 {
    display: flex;
    margin-left: 100px;
  }
  .img01 > div:first-child > img {
    width: 250px;
    height: 250px;
    margin: 10px;
  }
  
  .img01 > div:nth-child(2) > img {
    width: 250px;
    height: 250px;
    margin: 10px;
  }
  .img02 {
    display: flex;
    margin-left: 100px;
  }
  
  .img02 > div:first-child > img {
    width: 250px;
    height: 250px;
    margin: 10px;
  }
  
  .img02 > div:nth-child(2) > img {
    width: 250px;
    height: 250px;
    margin: 10px;
  }
  </style>